<template>
	<div class="decorate-bulletin"
    :style="tplItemData.modulePadding || tplItemData.modulePadding ==0?'padding-top:'+tplItemData.modulePadding+'px;padding-bottom:'+tplItemData.modulePadding+'px;':'padding-top:5px;padding-bottom:5px;'">
    <div class="bulletin-box" 
      :style="(tplItemData.isTransparentBg == 0 || tplItemData.isTransparentBg == undefined) && tplItemData.transColor!= '' ?'background-color:'+tplItemData.transColor+';':'background-color:transparent;'" 
      :class="[tplItemData.isPadding == 0 ? 'isPadding':'',(tplItemData.isBorderRadius == 1 || !tplItemData.isBorderRadius )?'borderRadius':'',tplItemData.fontSize]"
    >
      <!-- TODO 小程序文字滚动 -->
      <div :class="['lunbo','lunbo'+tplItemData.noticeStyle]" :style="{'background-color':tplItemData.bgColor}">
        <p class="lunbo-p" :style="{color:tplItemData.fontColor ? tplItemData.fontColor : '#ed6a0c' , transform: 'translateX(-'+scrollLeft+'px)', marginLeft:  marginLeft + 'px'}">{{tplItemData.showtitle}}</p>
        <span class="notice-icon" v-show="tplItemData.noticeStyle==2" 
          :style="{
            'background': tplItemData.noticeStyle==2 && (tplItemData.icon == '' || tplItemData.icon ==undefined)?'url(https://img.wifenxiao.com/h5-wfx/images/diy/notice_ico.png) no-repeat left 10px center':`url(${tplItemData.icon}) no-repeat left 10px center;`,
            'background-size': '38rpx 38rpx;',
            'background-color':tplItemData.bgColor
          }"
        ></span>
      </div>
    </div>
  </div>
</template>

<script>
/**
 * @Author: yqe@360shop.cn
 * @Date: 2020年07月08日15:11:21
 * @Last Modified by: yqe@360shop.cn
 * @Last Modified time: 2020年07月08日15:11:21
 */
import Vue from 'vue'
export default Vue.extend({
  name: 'index',
  props: {
    tplItemData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      scrollLeft: 0,
      timer: null,
      contentWidth: 0,
      wrapWidth: 0,
      marginLeft: 40
    }
  },
  methods: {
    handleScrollLeft() {
      const title = `公告：${this.tplItemData.showtitle}`
      this.wrapWidth = (title.length * 25) / 2
      document.querySelector('.lunbo-p').$$getBoundingClientRect().then((res) => {
        this.contentWidth = res.width - this.marginLeft
        this.marginLeft = res.width - this.marginLeft
      })
      if (!this.timer) {
        this.timer = setInterval(() => {
          if (this.contentWidth >= this.wrapWidth) {
            clearInterval(this.timer)
            this.marginLeft = 40
          } else if (this.scrollLeft < this.wrapWidth + this.contentWidth) {
            this.scrollLeft++
          } else {
            this.scrollLeft = 0
          }
        }, 30)
      }
    }
  },
  mounted() {
    this.handleScrollLeft()
  },
  destroyed() {
    this.timer = null
    clearInterval(this.timer)
    this.left = 0
  }
})
</script>

<style lang="scss">
.bulletin-box{
  padding: 18px 25px;
  background: #fff;
  &.borderRadius{
      border-radius: 20px;
  }

  .van-notice-bar{
    height: 82px;
    overflow: hidden;
    &.bulletin1{
      border-radius: 20px;
    }
    &.bulletin2{
      border-radius: 41px;
      .van-notice-bar__left-icon{
        width: 38px;
        height: 38px;
        img{
          width: 38px;
          height: 38px;
        }
      }
    }
  }
  &.font12{
    .van-notice-bar__content{
      font-size: 24px;
    }
  }
  &.font14{
    .van-notice-bar__content{
      font-size: 28px;
    }
  }
  &.font16{
    .van-notice-bar__content{
      font-size: 32px;
    }
  }
}
.miniprogram-root {
  .bulletin-box {
    &.font12{
      font-size: 24px;
    }
    &.font14{
      font-size: 28px;
    }
    &.font16{
      font-size: 32px;
    }
    .lunbo {
      position: relative;
      width: 100%;
      height: 82px;
      background: #ffffcc;
      overflow: hidden;
      box-sizing: border-box!important;
      &.lunbo1{
        border-radius: 20px;
      }
      &.lunbo2{
        border-radius: 41px;
      }
      .notice-icon{
        position: absolute;
        left: 0;
        top: 0;
        width: 58px;
        height: 82px;
        background: url(https://img.wifenxiao.com/h5-wfx/images/diy/notice_ico.png) no-repeat left 10px center;
        background-size: 38px 38px;
      }
      .lunbo-p {
        width: 100%;
        line-height: 80px;
        display: inline-block;
        white-space: nowrap;
        color: #000;
      }
    }
  }
}
.isPadding {
  padding: 0
}
</style>
